<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>点击div变色</title>
</head>
<link rel="stylesheet" href="./CSS/let-变色练习.css">
<body>
  <div class="container">
      <div>点击变色</div>
      <div>点击变色</div>
      <div>点击变色</div>
  </div>
  <script>
    let boxS=document.querySelectorAll('.container>div');
    //遍历for方法 （使用var会变量提升）
    for (let i = 0; i < boxS.length; i++) {
        boxS[i].addEventListener('click',function () {
            this.style.backgroundColor='red'
            this.style.color='white'
        })
    }

    //遍历forEach方法
    // boxS.forEach(function (item) {
    //     item.addEventListener('click',function () {
    //         this.style.backgroundColor='red'
    //         this.style.color='pink'
    //     })
    // })
  </script>
</body>
</html>